<template>
  <div @click="toPlayer">
    <div
      class="icon-index"
      v-for="(item, index) in dynamicl"
      :key="item.id"
      :data-index="index"
      :data-id="item.id"
    >
      <div class="together">
        <p class="font">{{ index + 1 }}</p>
        <p class="iconfont heart" @click="switchs(item.id)" v-show="!item.like">
          &#xe66f;
        </p>
        <p class="iconfont heart" v-show="item.like" @click="switchs(item.id)">
          &#xe600;
        </p>
        <p class="iconfont download">&#xe66c;</p>
      </div>
      <div class="downs-name">{{ item.name }}</div>
      <div class="downs-user">{{ item.ar[0].name }}</div>
      <div class="downs-home">{{ item.al.name }}</div>
      <div class="downs-time">{{ item.ds }}</div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: "MusicList",
  props: {
    dynamicl: Array,
    clicklove: Function,
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations("player",["UPDATEMUSICINDEX"]),
    switchs(id) {
      this.clicklove(id);
    },
    toPlayer(event){
      console.log(event.path[1].dataset.index)

      this.UPDATEMUSICINDEX(event.path[1].dataset.index)
      const musicId = event.path[1].dataset.id
      console.log(`/player/${musicId}`)
      this.$router.push(`/player/${musicId}`)
    }
  },
};
</script>

<style lang="less" scoped>
// 每条歌曲展示
.icon-index:hover {
  background:rgb(231, 241, 255);
}
.icon-index {
  display: flex;
  font-size: 12px;
  height: 35px;
  color: #666;
  line-height: 35px;

  .together {
    display: flex;
    align-items: center;
    .font {
      margin-left: 15px;
      margin-right: 15px;
      width: 15px;
    }
    .heart {
      margin-right: 10px;
    }
    .heart:hover {
      cursor: pointer;
    }

    .download {
      margin-right: 16px;
    }
    .download:hover {
      cursor: pointer;
    }
  }
}
.icon-index:nth-of-type(2n) {
  background-color: rgb(245, 245, 245);
}

.downs-name {
  width: 370px;
}
.downs-name:hover {
  cursor: pointer;
}
.downs-user {
  width: 200px;
}
.downs-user:hover {
  cursor: pointer;
}
.downs-home {
  width: 250px;
}
.downs-home:hover {
  cursor: pointer;
}
.downs-time {
  width: 100px;
}
</style>
